<template>
	<!-- 记账列表 -->
	<view class="jz-list">
		<u-swipe-action>
			<u-swipe-action-item
				btn-width="120"
				:key="index"
				v-for="(item, index) in showItemList"
				:show="item.show"
				@click="(index: any) => click(index)"
				:options="options"
				:name="index"
			>
				<view class="itemStyle">
					<view class="row">
						<view>{{ filterTime(item.time) }}</view>
						<view>{{ item.registrant }}</view>
					</view>
					<view class="row">
						<view>花费：</view>
						<view>{{ item.cost }}元</view>
					</view>
					<view class="row">
						<view>收入：</view>
						<view>{{ item.income }}元</view>
					</view>
					<view class="row">
						<view>备注：</view>
						<view>{{ item.remark }}</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";

const props = withDefaults(
	defineProps<{
		itemList: ListItem[];
	}>(),
	{
		//方式二 使用withDefaults 添加默认值
		itemList: () => []
	}
);
const showItemList = ref<any[]>([]);
watchEffect(() => {
	showItemList.value =
		props.itemList.map((item) => {
			return {
				...item,
				show: false
			};
		}) || [];
});

// let itemList = ref(props.itemList);

const emit = defineEmits(["editItem", "delItem"]);

const options = [
	{
		text: "编辑",
		style: {
			backgroundColor: "#1296db"
		}
	},
	{
		text: "删除",
		style: {
			backgroundColor: "#dd524d"
		}
	}
];

const filterTime = (date: Date) => dayjs(date).format("YYYY-MM-DD HH:mm");

// const open = (index: number) => {
// 	// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 	// 原本为'false'，再次设置为'false'会无效
// 	itemList.value[index].show = !itemList.value[index].show;
// 	itemList.value.map((val: any, idx: number) => {
// 		if (index != idx) itemList.value[idx].show = false;
// 	});
// };
const click = (index: any) => {
	console.log(index);
	if (index.index == 1) {
		delItem(index);
	} else {
		emit("editItem", index.name);
	}
};
const delItem = (index: number) => {
	uni.showModal({
		title: "提示",
		content: "确认删除么",
		success: async (res) => {
			if (res.confirm) {
				emit("delItem", index);
			}
		}
	});
};
</script>

<style scoped lang="scss">
.jz-list {
	// ::v-deep .u-swipe-view{
	// 	align-items: center;
	// }
	.itemStyle {
		background-color: #fff;
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		.row {
			display: flex;
			justify-content: space-between;
		}
		.tag {
			font-size: 32rpx;
			line-height: 40rpx;
			font-weight: bold;
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			color: #fff;
		}
		&.type1 {
			.tag {
				background-color: $uni-color-primary;
			}
		}
		&.type2 {
			.tag {
				background-color: $uni-color-warning;
			}
		}
	}
}
</style>
